<template>
     <div class="view-container">

          <!-- 数据库表生成 -->
          <el-form :model="form" label-width="150px">
               <!-- 项目根路径 -->
               <p>项目根路径</p>
               <el-col :span="12">
                    <el-form-item label="项目根路径">
                         <el-input v-model="Root" />
                    </el-form-item>
               </el-col>
               <p>数据库表生成</p>
               <el-col :span="12">
                    <el-form-item label="数据库表生成路径">
                         <el-input v-model="MySQL_table_src" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="数据库表名字">
                         <el-input v-model="MySQL_table_name" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="数据库表名字(中文)">
                         <el-input v-model="MySQL_table_name_chinese" />
                    </el-form-item>
               </el-col>
               <!-- 添加字段 -->
               <el-col :span="12">
                    <el-form-item label="添加字段">
                         <el-input v-model="add_font" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="字段类型">
                         <el-input v-model="font_type" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="字段长度">
                         <el-input v-model="font_length" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="是否为空">
                         <el-select v-model="region" placeholder="是否为空">
                              <el-option label="不能为空" value="NOT NULL" />
                              <el-option label="可以为空" value="NULL" />
                         </el-select>
                    </el-form-item>
               </el-col>
               <el-button type="success" @click="Add_Font()">添加字段</el-button>
               <!-- 字段显示内容 -->
               <el-col :span="12">
                    <el-form-item label="字段详情">
                         <el-input v-model="font_content" type="textarea" />
                    </el-form-item>
               </el-col>
               <!-- 前端生成 -->
               <p>前端生成</p>
               <el-col :span="12">
                    <el-form-item label="前端字段名字">
                         <el-input v-model="api_font_name" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="类型">
                         <el-radio-group v-model="api_region">
                              <el-radio :label="input" :value="input" border>输入框</el-radio>
                              <el-radio :label="textarea" border>文本域</el-radio>
                              <el-radio :label="upload" border>文件上传</el-radio>
                              <el-radio :label="Switch_one" border>开关[默认]</el-radio>
                              <el-radio :label="Switch_two" border>开关[带背景]</el-radio>
                              <el-radio :label="Slider" border>滑块</el-radio>
                              <el-radio :label="colorpicker" border>取色器</el-radio>
                            </el-radio-group>
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="搜索类型">
                         <el-radio-group v-model="api_search_select">
                              <el-radio :label="NotUseserach" :value="NotUseserach" border >不使用</el-radio>
                              <el-radio :label="serach_input"  border >输入框</el-radio>
                            </el-radio-group>
                    </el-form-item>
               </el-col>
               <!-- 字段显示内容 -->
               <el-col :span="12">
                    <el-form-item label="类型详情">
                         <el-input v-model="api_type" type="textarea" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="类型绑定">
                         <el-input v-model="api_type_model" type="textarea" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="接口参数">
                         <el-input v-model="api_interface" type="textarea" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="字段详情">
                         <el-input v-model="api_font_content" type="textarea" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="List渲染">
                         <el-input v-model="api_list" type="textarea" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="搜索框">
                         <el-input v-model="api_search" type="textarea" />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="文件上传成功接口">
                         <el-input v-model="api_upload_success_interface" type="textarea" />
                    </el-form-item>
               </el-col>
               <!-- 接口类型 -->
               <p>接口类型</p>
               <el-col :span="12" :offset="0">
                    <el-checkbox v-model="Add" label="添加" value="添加" border />
                    <el-checkbox v-model="Edit" label="编辑" value="编辑" border />
                    <el-checkbox v-model="Delete" label="删除" value="删除" border />
               </el-col>

               <!-- 后端控制层和模型层 -->
               <p>后端生成</p>
               <el-col :span="12">
                    <el-form-item label="后端文件名字">
                         <el-input v-model="back_file_name" disabled />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="后端控制层需求字段">
                         <el-input v-model="back_control_font" disabled />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="后端模型层需求字段">
                         <el-input v-model="back_model_font" disabled />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="后端部分需求字段">
                         <el-input v-model="back_font" disabled />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="后端字段匹配">
                         <el-input v-model="back_normal" disabled />
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item label="后端搜索字段">
                         <el-input v-model="back_serach" disabled />
                    </el-form-item>
               </el-col>
          </el-form>
          <el-button type="success" @click="Make_Api()">生成Api接口</el-button>
          <el-button type="success" @click="Make_Code()">生成代码</el-button>
     </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { MakeCode,MakeApi } from '../service/MakeCode.js'

const form = ref()

//*项目根路径
const Root = ref()
// *数据表生成
const region = ref('NOT NULL')// *默认不能为空
const MySQL_table_src = ref()
const MySQL_table_name = ref()
const MySQL_table_name_chinese = ref()
const add_font = ref()
const font_type = ref()
const font_length = ref()
const font_content = reactive([])

// *前端生成
const api_font_name = ref()
const api_region = ref()
const api_font_content = reactive([])
const api_list = reactive([])
const api_type = reactive([])
const api_type_model = reactive([])
const api_interface = reactive([])
const api_Edit_model = reactive([])
const api_Edit_interface = reactive([])
const api_search = reactive([])
// *后端生成
const back_file_name = MySQL_table_name
const back_control_font = reactive([])
const back_model_font = reactive([])
const back_font = reactive([])
const back_normal = reactive([])
const back_serach = reactive([])
//*类型
const input = '<el-col :span="12">\n<el-form-item label="10086">\n<el-input v-model="20086" placeholder="30086" />\n</el-form-item>\n</el-col>'
const textarea = '<el-col :span="12">\n<el-form-item label="10086">\n<el-input v-model="20086" type="textarea" placeholder="30086"  :autosize="{ minRows: 2, maxRows: 8 }" />\n</el-form-item>\n</el-col>'
const upload = '<el-form-item label="10086">\n<el-upload\n :file-list="[{ name: '+"'"+"'"+' , url: ReadImageSrc+20086 }]"\n  action="#" :auto-upload="false"\nlist-type="picture-card"\n :http-request="false"\n:on-change="handlePictureCardPreview"\n :on-preview="handlePreview"\n:on-remove="handleRemove" limit="1">\n</el-upload>\n<el-dialog v-model="dialogVisible">\n<img w-full style="height: 50vh;" :src="UploadSrc " alt="Preview Image" />\n</el-dialog>\n</el-form-item>'
const Switch_one = '<el-col :span="12">\n<el-form-item label="10086">\n<el-switch  v-model="20086" />\n</el-form-item>\n</el-col>'
const Switch_two = '<el-col :span="12">\n<el-form-item label="10086">\n<el-switch  v-model="20086" class="ml-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>\n</el-form-item>\n</el-col>'
const Slider = '<el-col :span="12">\n<el-form-item label="10086">\n<el-slider v-model="20086" />\n</el-form-item>\n</el-col>'
const colorpicker = '<el-col :span="12">\n<el-form-item label="10086">\n <el-color-picker v-model="20086" show-alpha :predefine="predefineColors" />\n</el-form-item>\n</el-col>'

//*搜索框
const api_search_select = ref()
const serach_input = ref('<el-col :span="6">\n<el-form-item label="10086">\n<el-input v-model="20086" placeholder="30086" @input="Search()" />\n</el-form-item>\n</el-col>')
const NotUseserach = ref(' ')
//*接口类型
const Add = ref(['添加'])
const Edit = ref(['编辑'])
const Delete = ref(['删除'])
//*文件上传接口
const api_upload_success_interface = reactive([])


// *添加字段
const Add_Font = () => {
     //添加数据库表字段
     const font = add_font.value + "\t" + font_type.value + '(' + font_length.value + ')' + '\t' + region.value+',\n'
     font_content.push(font)
     //添加后端控制层需求字段
     const control_font = "'" + add_font.value + "|"+api_font_name.value+"'" + '\t' + "=>" + '\t' + "'require'" + ',' + '\n'
     back_control_font.push(control_font)
     //添加后端搜索字段
     back_serach.push('["'+add_font.value+'","LIKE","%".$params["'+add_font.value+'"]."%"],\n')
     //添加后端模型层需求字段
     const model_font = "'" + add_font.value + "'" + '\t' + "=>" + '\t' + "'" + font_type.value + "'" + ',' + '\n'
     back_model_font.push(model_font)
     // 添加后端部分需求字段
     back_font.push("'" + add_font.value + "'," + '\n')
     // 添加后端字段匹配
     if(api_region.value == upload)
     {
          const normal = "'" + add_font.value + "'" + '\t' + "=>" + '\t' +''+ "$params['" + add_font.value + "']," + '\n'
     back_normal.push(normal)
     }else{
     const normal = "'" + add_font.value + "'" + '\t' + "=>" + '\t' + "$params['" + add_font.value + "']," + '\n'
     back_normal.push(normal)
     }
     // 添加前端字段详情
     const api_content = add_font.value
     api_font_content.push(api_content)
     //添加前端List渲染
     const api_list_data = "{\nlabel:'" + api_font_name.value + "',\n prop:'" + add_font.value + "',\n width:200,\n},"
     api_list.push(api_list_data)
     if(api_region.value == upload)
     {
         //添加文件上传接口参数
         api_interface.push(add_font.value+":UploadName"+'.value,'+"\n")
         //*添加文件上传成功接口
         api_upload_success_interface.push(add_font.value+".value = uploadFile.name\n")

     }else
     {
               //添加接口参数
          api_interface.push(add_font.value+":"+add_font.value+'.value,'+"\n")
     }
        
     //添加前端搜索框
     api_search_select.value= api_search_select.value.replace('10086',api_font_name.value)
     api_search_select.value=api_search_select.value.replace('20086',add_font.value)
     api_search_select.value=api_search_select.value.replace('30086',"请输入"+api_font_name.value)
     api_search.push(api_search_select.value)
     //添加类型
     api_region.value = api_region.value.replace('10086',api_font_name.value)
     api_region.value = api_region.value.replace('20086',add_font.value,2)
     api_region.value = api_region.value.replace('30086',"请输入"+api_font_name.value)
     const api_type_data=api_region.value
     api_type.push(api_type_data)
     //类型绑定
     const api_type_model_data = 'const '+add_font.value+' = ref("")\n'
     api_type_model.push(api_type_model_data)

     //添加前端编辑类型绑定
     api_region.value =api_region.value.replace(add_font.value,'table.data.'+add_font.value)
     const api_Edit_model_data = api_region.value
     api_Edit_model.push(api_Edit_model_data)
     //添加前端编辑接口
     api_Edit_interface.push(add_font.value+":props.data."+add_font.value+',')
}

//*获取用户
const user = localStorage.getItem("User");
//*生成最终代码
const Make_Code = () => {
     const Interface = Add.value + Edit.value + Delete.value
     const data = {
          Root: Root.value,
          MySQL_table_src: MySQL_table_src.value, MySQL_table_name: MySQL_table_name.value, MySQL_table_name_chinese: MySQL_table_name_chinese.value, MySQL_font: font_content,
          Interface_type: Interface,
          Back_search:back_serach,Back_file_name: back_file_name.value, Back_control_font: back_control_font, Back_model_font: back_model_font, Back_font: back_font, Back_normal: back_normal,
          Api_content: api_font_content, Api_List: api_list,Api_type:api_type,Api_type_model:api_type_model,Api_interface:api_interface,
          Api_Edit_type:api_Edit_model,Api_Edit_interface:api_Edit_interface,Api_Search:api_search,
          Api_Upload_Interface:api_upload_success_interface,
          User:user,
     }
    MakeCode(data)
   
}
//*生成前端Api接口
const Make_Api = () =>
{
     const data = {
          Root:Root.value,MySQL_table_name_chinese:MySQL_table_name_chinese.value,Back_file_name:back_file_name.value,Back_font: back_font,User:user};
     MakeApi(data);
}

</script>
<style></style>